import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import styles from './index.less';
import {Toast,List,InputItem,Button,Modal,WingBlank,WhiteSpace} from 'antd-mobile';
import {routerRedux} from 'dva/router';
import Block from 'fs-flex'
import Header from '../../../../../../components/Header/index'
import Select from '../../../../../../components/Select/index'
import CmsService from '../../../../../../services/CmsService'
import Constant from '../../../../../../utils/constant'
class SettingPage extends React.Component{
  state={
    articleId:null,
    busiTypeArticles:[],
    show:false,
    bindedId:null,
  }
    async componentDidMount(){
        const {code,data}=await CmsService.list();
        if (Constant.responseOK === code) {
            let array=[]
            if(data){
                data.map(item=>{
                    array.push({
                        id:item.id,
                        sysValue:item.articleTitle
                    })
                })
            }
            this.setState({ busiTypeArticles: array })
        }
        if(this.props.location.state.data){
            const {code,data}=await CmsService.busiType(this.props.location.state.data.id); 
            if (Constant.responseOK === code && data) {
                this.setState({
                    bindedId:data.id
                })
            }
        }
          
    }
    todoSelcetChange=(id)=>{
        this.setState({articleId:id})
    }

    fontSize=(value)=>{
        if(!value){
            return ''
        }
        if(value.length>12){
            return value.substring(0,12)+'..'
        }
        return ''
    }
    async binding(){
        const {articleId,}=this.state
        if(this.props.location.state.data){
            const {code,data}=await CmsService.bind(articleId,this.props.location.state.data.id)
            if(Constant.responseOK ===code){
                this.props.history.push('/manage/sysBusiType')
            }else{
                Toast.fail('操作异常！')
            }
        }
       
    }
  
  render(){
      const {busiTypeArticles,bindedId}=this.state
      const { getFieldProps  } = this.props.form;
      const fontSize=(value)=>{
          if(!value){
              return '';
          }
          if(value.length>18){
            return value.substring(0,16)+'..'
          }
          return value
      }
    return (
      <Block vf>
        <Block>
          <Header title='业务范围编辑' needBack="true" history={this.props.history}/>
        </Block>
        <WingBlank size="lg">
            <WhiteSpace size="lg" />
                <List>
                    <List.Item>
                        <Block wf>
                            <Block w={85} style={{paddingLeft:'15px'}}>业务范围</Block>
                            <Block f={1} fs={13}>{this.props.location.state && this.props.location.state.data?fontSize(this.props.location.state.data.busitype):""}</Block>
                        </Block>
                    </List.Item>
                    <List.Item>
                        <Block wf>
                            <Block w={85} style={{paddingLeft:'15px'}}>操作说明</Block>
                            <Block f={1}><Select data={busiTypeArticles} change={this.todoSelcetChange} defaultSelect={bindedId?bindedId:null}/></Block>
                        </Block>
                        
                    </List.Item>
                </List>
            <WhiteSpace size="lg" />
            <Block wf mt={15}>
                <Block f='3'></Block>
                <Block f='4'><Button a='c' f='c' size='small' type="primary" onClick={() =>
                        this.binding()}
                    >保存</Button></Block>
                <Block f='3'></Block>
            </Block>
        </WingBlank>
      </Block>
    );
  }
  
}

SettingPage
.propTypes = {
};

export default createForm()(connect()(SettingPage));
